<!DOCTYPE html>
<html lang='zh-CN'>

<head>
  <meta charset='UTF-8'>
  <title>vue component</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <div id='app' v-cloak>
    <div class="nav">
      <a @click="tab('tabs1')" :class="{'nav_active': comName == 'tabs1'}">登录</a>
      <a @click="tab('tabs2')" :class="{'nav_active': comName == 'tabs2'}">注册</a>
      <a @click="tab('tabs3')" :class="{'nav_active': comName == 'tabs3'}">首页</a>
    </div>
    <transition mode="out-in">
      <component :is="comName" @change="tab"></component>
    </transition>
  </div>
  <template id="tabs1">
    <div class="tabs1">
      <div class="login">
        <div>
          <my-input ref="accInput" label="账号" @new-data="inputAcc"></my-input>
          <my-input ref="pswInput" label="密码" @new-data="inputPsw" type="password"></my-input>
          <!-- <p>
            账号
            <input placeholder="账号" type="text" />
          </p>
          <p>
            密码
            <input placeholder="密码" type="password" />
          </p> -->
          <p>
            <my-button text="登录" @on-click="login"></my-button>
            <my-button text="注册" @on-click="register"></my-button>
          </p>
        </div>
        <div>
          <span class="img-warp">
            <img src="./img/qr.png" ref="img"/>
          </span>
        </div>
      </div>
    </div>
  </template>
  <template id="tabs2">
    <div class="tabs2">
      <div class="register">
        <div>
          <my-input ref="accInputRe" label="账号" v-model="acc"></my-input>
          <my-input ref="pswInputRe" label="密码" v-model="psw" type="password"></my-input>
          <my-input ref="psw2InputRe" label="确认密码" v-model="psw2" type="password"></my-input>
          <!-- <p>
            账号
            <input placeholder="账号" type="text" />
          </p>
          <p>
            密码
            <input placeholder="密码" type="password" />
          </p>
          <p>
            确认密码
            <input placeholder="确认密码" type="password" />
          </p> -->
          <p>
            <my-button text="已有帐号？" @on-click="login"></my-button>
            <my-button text="注册" @on-click="register"></my-button>
          </p>
        </div>
      </div>
    </div>
  </template>
  <template id="tabs3">
    <div class="index">
      <h1>{{msg}}</h1>
      <template v-if="userName">
        <h2>您的账号:{{userName}}</h2>
        <h2>您的密码:{{userPsw}}</h2>
      </template>
    </div>
  </template>
 <!-- <template id="button">
    <button class="my-button" @click="handleButton">{{text}}</button>
  </template> -->
  <<!-- template id="input">
    <!-- <p class="my-input">
      {{label}}
      <input :placeholder="label" :type="type" v-model="value" @blur="submitInput" @input="change" />
      <i v-if="errMsg">{{errMsg}}</i>
    </p> -->
  <!-- </template> --> -->
  <script src='vue.js'></script>
  <Script src="httpVueLoader.js"></Script>
  <script>
    var myinput =httpVueLoader('code/myinput.vue');
    Vue.component('myinput',myinput);
    var Mybutton =httpVueLoader('code/Mybutton.vue');
    Vue.component('Mybutton',Mybutton);
     var index =httpVueLoader('code/index.vue');
      var login =httpVueLoader('code/login.vue');
       var register =httpVueLoader('code/register.vue');
       
  </script>
  <script src="vue-router.js"></script>
  <script>

    // 全局组件
    // Vue.component('myButton', {
    //   template: '#button',
    //   // props: ['text'],   //父组件向子组件传值
    //   props: {
    //     text: {
    //       type: String,
    //       default: 'Button'
    //     }
    //   },
    //   methods: {
    //     handleButton() { //子组件调用父组件事件  即 父组件向子组件传递方法
    //       this.$emit('on-click')
    //     }
    //   }
    // });

    // 私有组件
    var tabs1 = {
      template: '#tabs1',
      data() {
        return {
          acc: null,
          psw: null
        }
      },
      methods: {
        login() {
          let checkAcc = this.$refs.accInput.submitInput();
          let checkPsw = this.$refs.pswInput.submitInput();
		  console.log(this.$refs.accInput);
		  console.log(this);
          if (checkAcc == true && checkPsw == true) {
            alert(`登录成功，您的账号是:${this.acc}；您的密码是:${this.psw}`)
            localStorage.setItem('userName', this.acc);
            localStorage.setItem('userPsw', this.psw);
          }
        },
        register() { //子组件调用父组件事件并向父组件传值
          this.$emit('change', 'tabs2')
        },
        inputAcc(e) {
          this.acc = e
        },
        inputPsw(e) {
          this.psw = e
        }
      }
    };
    var tabs2 = {
      template: '#tabs2',
      methods: {
        login() { //子组件调用父组件事件并向父组件传值
          this.$emit('change', 'tabs1')
        },
        register() {
          let checkAcc = this.$refs.accInputRe.submitInput();
          let checkPsw = this.$refs.pswInputRe.submitInput();
          let checkPsw2 = this.$refs.psw2InputRe.submitInput();
          if (checkAcc == true && checkPsw == true && checkPsw2 == true) {
            alert(`注册成功，您的账号是:${this.acc}；您的密码是:${this.psw}`)
          }
        }
      },
      data() {
        return {
          acc: null,
          psw: null,
          psw2: null
        }
      },
    };
    var tabs3 = {
      template: '#tabs3',
      mounted() {
        this.userName = localStorage.getItem('userName');
        this.userPsw = localStorage.getItem('userPsw');
      },
      data() {
        return {
          msg: 'hello vue',
          userName: null,
          userPsw: null
        }
      }
    };
    // vue实例
    var vm = new Vue({
      el: '#app',
      components: {
        tabs1,
        tabs2,
        tabs3
      },
      data: {
        comName: 'tabs1'
      },
      methods: {
        tab(e) {
          this.comName = e;
        },
      }
    })
  </script>
  <style>
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(100px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.5s ease;
    }

    body {
      margin: 0;
      padding: 0;
      background-color: lightgrey;
    }

    #app .nav {
      padding: 20px;
      background-color: white;
      box-shadow: 0px 0px 20px -10px grey;
    }

    #app .nav a {
      margin-right: 20px;
      font-size: 18px;
      color: #333;
    }

    #app .nav_active {
      color: blueviolet !important;
      font-weight: bold;
    }

    .tabs1 {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100vw;
      height: calc(100vh - 64px);
    }

    .tabs1 .login {
      padding: 20px;
      background-color: white;
      width: 50%;
      height: 50%;
      border-radius: 20px;
      box-shadow: 0px 0px 20px -10px grey;
      display: flex;
      box-sizing: border-box;
    }

    .tabs1 .login div {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .tabs1 .login div .img-warp {
      margin: 0 auto;
      width: 70%;
      height: 0;
      padding-bottom: 70%;
      box-sizing: border-box;
      position: relative;
    }

    .tabs1 .login div .img-warp img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }


    .tabs2 {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100vw;
      height: calc(100vh - 64px);
    }

    .tabs2 .register {
      padding: 20px;
      background-color: white;
      width: 25%;
      height: 50%;
      border-radius: 20px;
      box-shadow: 0px 0px 20px -10px grey;
      display: flex;
      box-sizing: border-box;
    }

    .tabs2 .register div {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

  /*  .my-button {
      border: 1px solid blueviolet;
      border-radius: 10px;
      padding: 10px;
      font-size: 16px;
      background-color: rgba(137, 43, 226, 0.25);
      margin-left: 10px;
      flex-grow: 1;
      color: blueviolet;
    }

    .my-button:active {
      background-color: rgb(137, 43, 226);
      color: white;
    } */
  </style>
</body>

</html>
